<template>
  <div class="user-info">
    <div class="signatureBox-popup" :style="{ 'z-index': zIndex }">
      <div class="popup2">
        <div class="signatureBox">
          <div class="canvasBox" ref="canvasHW">
            <div style="padding-top: 20px" class="input_text">
              请在下面空白区域签名
            </div>
            <div
              style="padding-top: 10px; color: #ff0045; font-size: 12px"
              class="input_text"
            >
              必须由本人签字，违者将承担法律责任
            </div>
            <canvas
              ref="canvasF"
              @touchstart="touchStart"
              @touchmove="touchMove"
              @touchend="touchEnd"
              @mousedown="mouseDown"
              @mousemove="mouseMove"
              @mouseup="mouseUp"
            ></canvas>
            <!-- <div class="btnBox"> -->
            <!-- <div @click="overwrite">重写</div> -->
            <!-- <div @click="commit">提交签名</div> -->
            <!-- </div> -->
          </div>
        </div>
        <div style="padding-bottom: 20px; background-color: #fff">
          <button
            style="
              border: none;
              border-radius: 20px;
              color: #fff;
              padding: 5px;
              margin-left: 20px;
              float: left;
              background: #0798ea;
              width: 23%;
            "
            @click="commit"
          >
            确定
          </button>
          <button
            style="
              border: none;
              border-radius: 20px;
              color: #fff;
              padding: 5px;
              background: #b9bfd3;
              width: 23%;
            "
            @click="overwrite"
          >
            清除
          </button>
          <button
            style="
              border: none;
              border-radius: 20px;
              color: #fff;
              padding: 5px;
              margin-right: 20px;
              float: right;
              background: #b9bfd3;
              width: 23%;
            "
            @click="Canvas_goBack"
          >
            取消
          </button>
        </div>
      </div>
      <!-- <div class="popup_title">
          <div class="popup_title_">请输入证书信息</div>
        </div> -->

      <!-- </van-popup> -->
    </div>

    <van-field label="姓名" v-model="ChnName" name="ChnName" required>
    </van-field>

    <van-field label="部门" v-model="OrgName" name="OrgName"> </van-field>

    <van-field label="责任岗位" v-model="PostName" name="PostName" required>
    </van-field>

    <!-- <img class="imgCanvas" :src="imgUrl"> -->
    <van-field
      class="input_text"
      style="margin-bottom: 5px"
      name="uploader"
      required
    >
      <template #input>
        <div style="padding-right: 20px" class="input_text">签名</div>
        <div
          style="color: #1989fa"
          @click="AddCertificate('MarkSignAttach')"
          v-if="!imgUrl"
        >
          点击签字
        </div>
        <van-image
          @click="preview(baseUrl + imgUrl)"
          class="imgCanvas"
          :src="baseUrl + imgUrl"
          v-if="imgUrl"
        />
        <div
          class="ml-10"
          style="color: #1989fa"
          @click="empty('MarkSignAttach')"
          v-if="imgUrl"
        >
          删除
        </div>
        <!-- <van-uploader
          v-model="imgUrl"
          :max-count="1"
          :after-read="beforeRead"
          :before-delete="beforedelete"
        /> -->
      </template>
    </van-field>

    <div class="btn_submit">
      <van-button block type="info" @click="onSubmit"> 提交 </van-button>
    </div>
    <van-overlay :show="showImg">
      <div class="imageShow" @click="showImg = false">
        <van-image width="100%" :src="imagePath" />
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { CommonAttachUploadBase64,ResponsibilityOrgPostUserDepositManageSign } from "@/api/common";
import store from "@/store/index";
import { ImagePreview } from "vant";
// import {  base64ToPath } from 'image-tools'

export default {
  components: { ImagePreview },
  data() {
    return {
      showImg: false,
      imagePath: "",
      baseUrl: process.env.VUE_APP_BASE_API,
      id: this.$route.query.IDS,
      TypeName: this.$route.query.TypeName,
      adds: "",
      zIndex: -8,
      isCertificate: true,
      isCertificate2: false,
      stageInfo: "",
      imgUrl: "",
      client: {},
      points: [],
      canvasTxt: null,
      startX: 0,
      startY: 0,
      moveY: 0,
      moveX: 0,
      endY: 0,
      endX: 0,
      w: null,
      h: null,
      isDown: false,
      isViewAutograph: this.$route.query.isViews > 0,
      contractSuccess: this.$route.query.contractSuccess,

      ChnName: "",
      OrgName: "",
      PostName: "",
      DutyCode: "",
    };
  },
  created() {
    if (this.$route.query.DutyCode != null) {
      this.DutyCode = this.$route.query.DutyCode;
    }
  },
  mounted() {
    let canvas = this.$refs.canvasF;
    canvas.height = this.$refs.canvasHW.offsetHeight - 500;
    canvas.width = this.$refs.canvasHW.offsetWidth - 50;
    this.canvasTxt = canvas.getContext("2d");
    // this.canvasTxt.setClearColor(ff0045, 0.01);

    // this.canvasTxt.fillStyle="#ff0045"
    // this.canvasTxt.fillStyle = "#fff";
    //  this.canvasTxt.fillRect(0, 0, canvas.width, canvas.height);

    //     var imageData = this.canvasTxt.getImageData(0, 0, canvas.width, canvas.height);
    // for(var i = 0; i < imageData.data.length; i += 4) {
    //     // 当该像素是透明的，则设置成白色
    //     if(imageData.data[i + 3] == 0) {
    //         imageData.data[i] = 255;
    //         imageData.data[i + 1] = 255;
    //         imageData.data[i + 2] = 255;
    //         imageData.data[i + 3] = 255;
    //     }
    // }
    // this.canvasTxt.putImageData(imageData, 0, 0);
    this.stageInfo = canvas.getBoundingClientRect();
  },

  methods: {
    preview(arry) {
      this.showImg = true;
      this.imagePath = arry;
    },
    empty(emptyStr) {
      this.imgUrl = "";
    },

    //保存或提交按钮
    onSubmit(bool) {
      // params.append('file', file.file)

      if (!this.ChnName) {
        return this.$toast("请输入姓名");
      }

      if (!this.PostName) {
        return this.$toast("请输入责任岗位");
      }

      if (!this.imgUrl) {
        return this.$toast("请签名");
      }

      // SignPic	/Uploads/00001/20210325/d471aa9f-6ef7-4848-856e-c5cf62db840f.jpg
      // ChnName	陈
      // OrgName	嗯
      // PostName	嗯
      // DutyCode	PEDOC21031900003
      var data = {
        SignPic: this.imgUrl,
        ChnName: this.ChnName,
        OrgName: this.OrgName,
        PostName: this.PostName,
        DutyCode: this.DutyCode,
      };
      ResponsibilityOrgPostUserDepositManageSign(data)
        .then((res) => {
          setTimeout(() => {
            // this.$router.push("/Site_Appointment");
            this.$router.go(-2);
          }, 500);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },

    AddCertificate(add) {
      this.adds = add;
      this.zIndex = 8;
      this.isCertificate = true;
      this.isCertificate2 = true;
      this.overwrite();
    },
    Canvas_goBack() {
      this.zIndex = -8;
      this.isCertificate = false;
      this.isCertificate2 = false;
    },
    //mobile
    touchStart(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clienX,
          y: ev.targetTouches[0].clientY,
        };
        this.startX = obj.x;
        this.startY = obj.y;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
      }
    },
    touchMove(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stageInfo.left,
          y: ev.targetTouches[0].clientY - this.stageInfo.top,
        };
        this.moveY = obj.y;
        this.moveX = obj.x;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);
      }
    },
    touchEnd(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stageInfo.left,
          y: ev.targetTouches[0].clientY - this.stageInfo.top,
        };
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
      }
    },
    //pc
    mouseDown(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (1) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY,
        };
        this.startX = obj.x;
        this.startY = obj.y;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
        this.isDown = true;
      }
    },
    mouseMove(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (this.isDown) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY,
        };
        this.moveY = obj.y;
        this.moveX = obj.x;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);
      }
    },
    mouseUp(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (1) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY,
        };
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
        this.points.push({ x: -1, y: -1 });
        this.isDown = false;
      }
    },
    //重写
    overwrite() {
      this.canvasTxt.clearRect(
        0,
        0,
        this.$refs.canvasF.width,
        this.$refs.canvasF.height
      );
      this.points = [];
    },
    // 上传图片
    afterRead(base64) {
      var params = {
        Img: base64,
      };
      CommonAttachUploadBase64(params)
        .then((res) => {
          this.imgUrl = res.data.FilePath;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    //提交签名
    commit() {
        this.imgUrl = this.$refs.canvasF.toDataURL();

      this.afterRead(this.$refs.canvasF.toDataURL());
      this.zIndex = -8;
    },
  },
};
</script>

<style scoped>
.popup2 {
  width: 100%;
  height: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
  border-radius: 7px;
}
.user-info {
  min-height: calc(100vh - 40px);
  background-color: #fff;
}
.imgCanvas {
  /* background-color: #71b900; */
  border: 1px solid #7d7d7d;
  width: 50px;
  height: 50px;
}
.signatureBox-popup {
  opacity: 1;
  background: #666;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding-top: 150px;
}

.signatureBox {
  width: 100%;
  height: calc(100% - 50px);
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  height: 60%;
  z-index: 9;
  display: inline-flex;
  flex-direction: column;
}
.canvasBox {
  box-sizing: border-box;
  flex: 1;
  height: 100%;
}
canvas {
  margin: 20px;
  width: 90%;
  height: 150px;
  border: 1px solid #7d7d7d;
}
.btnBox {
  padding: 10px;
  text-align: center;
}
.btnBox button:first-of-type {
  background: transparent;
  border-radius: 4px;
  height: 40px;
  width: 80px;
  font-size: 14px;
}
.btnBox button:last-of-type {
  background: #71b900;
  color: #fff;
  border-radius: 4px;
  height: 40px;
  width: 80px;
  font-size: 14px;
}
.van-image {
  background: #fff !important;
}
</style>